<template>
	<!-- 组件资源-上架数量 -->
	<div class="moduleResource-container">
		<!-- 第一行 -->
		<el-row :gutter="20">
			<!-- 组件总体概况 -->
			<el-col :span="12">
				<div class="content-box">
					<div class="content-header">
						<titleView text="组件总体概况" :font-size="24" :bg-image="require('@/assets/image/组 12.png')" />
					</div>
					<div class="content-main">
						<div class="content">
							<div class="content-left" @click="totalityDialod()" v-for="(item, idx) in centerLeftContentData" :key="idx">
								<div class="content-left-item-value">{{ item.value }} <span style="font-size:18px">个</span> </div>
								<div class="content-left-item-label">{{ item.label }}</div>
							</div>
							<div class="content-right">
								<div id="mycharts" style="width: 100%;height: 100%;"> </div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<!-- 组件应用概况 -->
			<el-col :span="12">
				<div class="content-box">
					<div class="content-header">
						<div class="content-titel">
							<titleView text="组件应用概况" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
						</div>
						<div class="content-tabs">
							<el-tabs v-model="activeName" @tab-click="handleClick">
								<el-tab-pane label="支撑领域" name="first"></el-tab-pane>
								<el-tab-pane label="支撑部门" name="second"></el-tab-pane>
								<el-tab-pane label="支撑应用" name="third"></el-tab-pane>
							</el-tabs>
						</div>
					</div>
					<div class="content-main">
						<div class="content">
							<div class="content-left" @click="totalityDialod()" v-for="(item, idx) in centerLeftContentData" :key="idx">
								<div class="content-left-item-value">{{ item.value }} <span style="font-size:18px">个</span> </div>
								<div class="content-left-item-label">{{ item.label }}</div>
							</div>
							<div class="content-right">
								<div id="mycharts" style="width: 100%;height: 100%;"> </div>
							</div>
						</div>
					</div>
				</div>
				<div class="moduleResource-center">
					<el-row>
						<el-col :span="12">
							<titleView text="组件应用概况" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
						</el-col>
						<el-col :span="12">
							<el-tabs v-model="activeName" @tab-click="handleClick">
								<el-tab-pane label="支撑领域" name="first"></el-tab-pane>
								<el-tab-pane label="支撑部门" name="second"></el-tab-pane>
								<el-tab-pane label="支撑应用" name="third"></el-tab-pane>
							</el-tabs>
						</el-col>
					</el-row>
					<el-row :gutter="20" style="height:300px;display: flex;align-items: center;">
						<el-col :span="8">
							<div class="content">
								<div style="width: 250px;" class="content-item1" v-for="(item, idx) in centerLeftContentData" :key="idx">
									<div class="item item-value">{{ item.value1 }}个</div>
									<div class="item item-label">{{ item.label1 }}</div>
								</div>
							</div>
						</el-col>
						<el-col :span="16">
							<!-- 支撑领域 -->
							<div id="applyEchartsFirst" style="width:600px;height:300px;" 
								:style="activeName == 'first' ? '' : 'display: none;'"
							>
							</div>
							<!-- 支撑部门 -->
							<div id="applyEchartsSecond" style="width:600px;height:300px;" 
								:style="activeName == 'second' ? '' : 'display: none;'"
							>
							</div>
							<!-- 支撑应用 -->
							<el-table :data="tableData" style="width: 100%;margin-top:20px" 
								:header-cell-style="{ backgroundColor: '#f5f7fa' }" 
								:style="activeName == 'third' ? '' : 'display: none;'"
							>
								<el-table-column type="index" label="序号"> </el-table-column>
								<el-table-column prop="area" label="组件名称"> </el-table-column>
								<el-table-column prop="departmentNum" label="组件所属单位"> </el-table-column>
								<el-table-column prop="num1" label="支撑应用数量(个)"> </el-table-column>
							</el-table>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
		<!-- 第二行 -->
		<el-row :gutter="20">
			<!-- 组件上架排行 -->
			<el-col :span="12">
				<div class="moduleResource-center" style="height: 500px;">
					<titleView text="组件上架排行" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
					<div id="ranksEcharts" style="width:800px;height:450px;"> </div>
				</div>
			</el-col>
			<!-- 组件支撑排行 -->
			<el-col :span="12">
				<div class="moduleResource-center" style="height: 500px;">
					<titleView text="组件上架排行" :font-size="24" :bg-image="require('@/assets/image/yunziyuan.png')" />
					<el-table :data="tableData" style="width: 100%;margin-top:20px" :header-cell-style="{ backgroundColor: '#f5f7fa' }">
						<el-table-column type="index" label="序号"> </el-table-column>
						<el-table-column prop="area" label="组件名称"> </el-table-column>
						<el-table-column prop="departmentNum" label="组件所属单位"> </el-table-column>
						<el-table-column prop="num1" label="支撑应用数量(个)"> </el-table-column>
					</el-table>
				</div>
			</el-col>
		</el-row>
		<!-- 组件总体概况弹窗 -->
		<Dialog :visible="dialodData.show" :title="dialodData.title" @update:visible="dialodData.show = !dialodData.show">
			
		</Dialog>
	</div>
</template>
  
<script>
import { mapGetters } from 'vuex'
import Dialog from '@/components/dialog'
import titleView from '@/components/title'
import countContent from '@/components/countContent'
import textAndCount from '@/components/textAndCount'
export default {
	name: 'DataResource',
	components: {
		Dialog,
		titleView,
		countContent,
		textAndCount
	},
	computed: {
		...mapGetters(['name'])
	},
	data() {
		return {
			activeName: 'first',
			// 总体概况左侧数据
			centerLeftContentData: [
				{ id: 0, label: '组件数量', label1: '支撑领域数', value: '30', value1: '7' }
			],
			// 表格数据
			tableData: [
				{ id: 0, departmentName: '市住房城乡建委', departmentNum: '12', area: '重庆', county: '渝中区', num1: '840', num2: '288', num3: '73' },
				{ id: 1, departmentName: '市交通局', departmentNum: '12', area: '重庆', county: '渝中区', num1: '840', num2: '288', num3: '73' },
				{ id: 2, departmentName: '市交通局', departmentNum: '12', area: '重庆', county: '渝中区', num1: '840', num2: '288', num3: '73' },
				{ id: 3, departmentName: '市规划自然资源局', departmentNum: '12', area: '重庆', county: '渝中区', num1: '840', num2: '288', num3: '73' },
				{ id: 4, departmentName: '市规划自然资源局', departmentNum: '12', area: '重庆', county: '渝中区', num1: '840', num2: '288', num3: '73' },
			],
			// 弹窗参数
			dialodData: {
				show: false,
				title: null,
			},
			// 组件总体概况图表
			totalityoption:{
				color: ['#FDC748', '#72BEFF'],
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: 'bottom',
					itemGap: 50
				},
				series: [
					{
						type: 'pie',
						center: ['50%', '50%'],
						avoidLabelOverlap: true,
						radius: '60%',
						label: {
							show: true,
							fontSize:'18px',
							formatter(param) {
								return param.value + '%';
							}
						},
						labelLine: {
							show: true,
							length: 45,
							length2: 45,
						},
						data: [
							{ value: 10.28, name: '强制类组件' },
							{ value: 30.67, name: '非强制类组件' },
						]
					}
				]
			}
		}
	},
	created() {

	},
	mounted() {
		this.totalityEcharts()
		this.applyEchartsFirst()
		this.ranksEcharts()
	},
	methods: {
		totalityDialod() {
			this.dialodData.show = true
		},
		// 组件总体概况图表
		totalityEcharts() {
			let myChart = this.$echarts.init(document.getElementById('mycharts'));
			myChart.setOption(this.totalityoption);
		},
		// 组件应用概况图表
		applyEchartsFirst() { //支撑领域
			let myChart = this.$echarts.init(document.getElementById('applyEchartsFirst'));
			let option = {
				color: ['#1890ff', '#4eb4e5'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				xAxis: {
					type: 'category',
					data: ['公共服务', '基层智治', '经济调解', '应急管理', '市场监管', '整体智治', '生态环保']
				},
				yAxis: {
					show: false,
				},
				series: [
					{
						label: {
							show: true,
							position: 'outside'
						},
						data: [27, 19, 15, 13, 12, 12, 11],
						type: 'bar'
					}
				]
			};
			myChart.setOption(option,true);
		},
		applyEchartsSecond() { //支撑部门
			let myChart = this.$echarts.init(document.getElementById('applyEchartsSecond'));
			let option = {
				color: ['#4eb4e5'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					show: false,
					type: 'value',
				},
				yAxis: {
					type: 'category',
					data: ['两江新区', '市大数据局', '涪陵区', '大渡口区']
				},
				series: [
					{
						type: 'bar',
						data: [25, 18, 18, 16],
						label: {
							show: true,
							position: 'outside'
						},
					},
				]
			}
			myChart.setOption(option,true);
		},
		// 组件应用概况 tabs切换
		handleClick(param) {
			switch (param.name) {
				case 'first':
					this.applyEchartsFirst()
					break;
				case 'second':
					this.applyEchartsSecond()
					break;
				default:
					break;
			}
		},
		// 组件排行概况图表
		ranksEcharts() {
			let myChart = this.$echarts.init(document.getElementById('ranksEcharts'));
			let option = {
				color: ['#4eb4e5'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					show: false,
					type: 'value',
				},
				yAxis: {
					type: 'category',
					data: ['市公安局', '市住建委', '市规自局', '市场监局', '市政府办公厅', '市大数据管理局']
				},
				series: [
					{
						type: 'bar',
						data: [1, 1, 1, 3, 3, 9],
						label: {
							show: true,
							position: 'outside'
						},
					},
				]
			}
			myChart.setOption(option);
		},
	},
}
</script>
  
<style lang="scss" scoped>
::v-deep.el-tabs {
		position: absolute;
		right: 10px;
	}
::v-deep.el-tabs__nav-wrap::after {
	height: 0px;
}
.moduleResource-container {
	width: 1862px;
	margin: 30px auto;
	.content-box {
		width: 916px;
		height: 440px;
		background-color: #ffffff;
		border-radius: 16px;
		padding: 18px 26px;
		.content-header {
			display: flex;
			.content-tabs {

			}
		}
		.content-main {
			height: 100%;
			display: flex;
			align-items: center;
			.content {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.content-left {
					width: 340px;
					height: 230px;
					cursor: pointer;
					border-radius: 16px;
					background: linear-gradient(180deg, rgba(114,190,255,0.15) 0%, rgba(222,246,251,0) 100%);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.content-left-item-value {
						font-size: 30px;
						font-weight: bold;
						margin-bottom: 18px;
					}
					.content-left-item-label {
						font-size: 18px;
					}
				}
				.content-right {
					width: 500px;
					height: 350px;
				}
			}
		}
	}
}
</style>
  